<page-bar class="lxmpagehead" style="margin: 0px 0px 16px -16px;padding: 0px; padding-left: 32px; padding-right: -32px;"
  [title]="'产品图片管理'">
  <button *ngIf="auth_batch_btn" (click)="open()" nz-button nzType="primary" style="margin-right: 30px;">批量上传</button>
</page-bar>

<div class="wrapper">
  <div class="card">
    <div class="card__hd">
      <app-product-search (search)="toSearch($event)"></app-product-search>
      <label nz-checkbox [(ngModel)]="checked" (ngModelChange)="typeChange($event)"
        style="margin-top: 5px">只显示无图</label>
    </div>
    <div class="card__bd">
      <app-pic-manger [p]="p" [type]="type"></app-pic-manger>
    </div>
  </div>
</div>

<nz-drawer [nzClosable]="true" [nzMaskClosable]="false" [nzVisible]="visible" [nzWidth]="'450px'"
  [nzPlacement]="'right'" nzTitle="批量上传" (nzOnClose)="close()">
  <nz-alert nzType="warning" [nzMessage]="alertMsg"></nz-alert>
  <ng-template #alertMsg>
    <p style="font-size: 12px;color: gray">1.文件名必须为<span class="text-red">产品代码</span> + 后缀，例如BL8010C10.jpg </p>
    <p style="font-size: 12px;color: gray">2.每次最多<span class="text-red">30</span>个图片同时上传，因此有大量图片需要上传时可以用<span
        class="text-red">zip</span>格式的压缩包上传</p>
    <p style="font-size: 12px;color: gray">3.同一时间只能有一个zip上传任务</p>
  </ng-template>
  <div class="myupload">
    <nz-upload style="margin-top:30px" nzType="drag" [nzShowUploadList]="true" [nzFileList]="fileListTmp"
      [nzMultiple]="true" nzAccept="image/*;" [nzLimit]="30" [nzAction]="url" [nzData]="extraParam"
      (nzChange)="handleChange($event)" [nzBeforeUpload]="beforeUpload">
      <p class="ant-upload-drag-icon">
        <i nz-icon nzType="inbox" nzTheme="outline"></i>
      </p>
      <p class="ant-upload-text">点击或拖拽图片到此区域进行上传</p>
      <p class="ant-upload-hint">
        支持单个或多个图片上传
      </p>
    </nz-upload>
    <nz-divider nzText="OR"></nz-divider>
    <nz-upload [nzDisabled]="ziping" [nzAction]="url" [nzBeforeUpload]="beforeUpload2" (nzChange)="handleChange($event)"
      [nzFileList]="fileListTmp2">
      <button nz-button nzBlock style="width: 400px"><i *ngIf="!ziping" nz-icon nzType="upload"></i><span
          *ngIf="!ziping">上传Zip图片压缩包</span>
        <i *ngIf="ziping" nz-icon nzType="loading" nzTheme="outline"></i><span *ngIf="ziping">{{zipdesc}}</span>
      </button>
    </nz-upload>
    <nz-progress *ngIf="ziping" [nzPercent]="parcent"></nz-progress>
  </div>
</nz-drawer>
